<template>
  <a-layout class="layout">
    <c-header @collapsedChange="collapsedChange"/>
    <a-layout >
      <sider class="c-sider" :collapsed="collapsed" ></sider>
      <div style="overflow: auto;width: 100%;">
        <c-content class="c-content" />
        <c-footer/>
      </div>
    </a-layout>
  </a-layout>
</template>

<script lang="ts">
export default {
  name: 'index'
}
</script>

<script lang="ts" setup>
import {
  UserOutlined,
  VideoCameraOutlined,
  UploadOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from '@ant-design/icons-vue';

import CContent from "/@/layouts/console/content/index.vue";
import CHeader from "/@/layouts/console/header/index.vue";
import Sider from "/@/layouts/console/sider/index.vue";
import {onMounted, ref} from "vue";
import CFooter from "/@/layouts/console/footer/index.vue";
import {events} from "/@/utils/bus";
import {AMessage} from "/@/views/portal/bid";
import {useMessage} from "/@/hooks/web/useMessage";
const collapsed = ref<boolean>(false);
function collapsedChange(val:boolean){
  collapsed.value = val
}


</script>
<style lang="less" scoped>

.site-layout .site-layout-background {
  background: #fff;
}


.layout{
  height: 100vh;
}

@height:@layout-header-height + 20;
.c-content{
  margin: @height 10px 20px 10px;
  min-height: calc(100vh - @layout-header-height - 40px - 70px);
  background-color: #F1F1F2;
}

.c-sider{
  margin-top: @layout-header-height;
  height: calc(100vh - @layout-header-height);
  overflow: auto;
}
</style>
